<template>
  <div style="padding: 10px">
    <br/>
    <div class="text">活动{{ruleForm.activityName}}中的商品列表</div>
    <br/>
    <div slot="header" class="clearfix">
      <span>商品列表</span>
        <el-button @click="dialogFormVisible = true" style="float: right;padding: 3px 50px 3px" type="primary">新添活动商品</el-button>
    </div>
    <el-dialog title="添加活动中的新商品" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="form.productName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"  @click="addactivity">添 加</el-button>
      </div>
    </el-dialog>
    <br/>
    <div>
      <el-table
        :data="tableData.slice((curPage-1)*pagesize,curPage*pagesize)"
        border
        style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品名称">
                <span>{{ props.row.productName }}</span>
              </el-form-item>
              <el-form-item label="商品 ID">
                <span>{{ props.row.productId }}</span>
              </el-form-item>
              <el-form-item label="商品分类">
                <span>{{ props.row.typeName }}</span>
              </el-form-item>
              <el-form-item label="商品定价">
                <span>{{ props.row.productPrice }}</span>
              </el-form-item>
              <el-form-item label="商品描述">
                <span>{{ props.row.introduction }}</span>
              </el-form-item>
              <el-form-item label="商品规格参数">
                <span>{{ props.row.specifications }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="商品图片">
          <template slot-scope="scope">
            　　　　<img :src="scope.row.image" width="40" height="40" class="head_pic"/>
            　　</template>
        </el-table-column>
        <el-table-column
          label="商品 ID"
          prop="productId">
        </el-table-column>
        <el-table-column
          label="商品名称"
          prop="productName">
        </el-table-column>
        <el-table-column
          label="价格"
          prop="price">
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="curPage"
        :page-size="pagesize"
        :pager-count="pagerCount"
        :total="tableData.length"
        background
        layout="total, prev, pager, next, jumper">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        ruleForm: {
          activityCode:this.$route.query.activityCode,
          activityName:this.$route.query.activityName
        },
        pagerCount:5,
        pagesize: 2,
        curPage: 1,
        tableData: [],
        dialogFormVisible: false,
        form: {
        },
        formLabelWidth: '120px'
      }
    },
    mounted() {

      this.init();

    },
    methods:{
      init:function() {
        let search={
          activityCode:this.$route.query.activityCode
        }
        console.log(search)
        this.$axios({
          headers:{
            "Content-Type": "application/json"
          },
          method: "post",
          url:"http://localhost:8080/api/activity/searchactivityproduct",
          data:{
            activityCode:search.activityCode
          }
        }).then((res)=>{
          console.log(res.data);
          if(res.data.resultCode==="0"){
            this.tableData= res.data.activityProductsList;

          }
        }).catch((error)=>{
          console.log(error);
        })
      },
      addactivity: function() {
        this.dialogFormVisible = false
        let adduser={
          activityCode: this.ruleForm.activityCode,
          productName: this.form.productName
        }
        this.$axios({
          headers:{
            "Content-Type": "application/json"
          },
          method:"post",
          url:"http://localhost:8080/api/activity/addactivityprod",
          data:{
            activityCode: adduser.activityCode,
            productName: adduser.productName
          }
        }).then((res)=>{
          if(res.data.resultCode==="0"){
            this.$message({
              message: '添加成功',
              type: 'success'
            });
            this.init()
          }else {
            this.$message({
              message: '添加失败',
              type: 'error'
            });
          }
        })
      }
    }
  }
</script>

<style scoped>
  .text {
    font-size: 30px;
    line-height: 46px;
    text-align: center;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
